<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>CSS-堆叠上下文 | Storm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="堆叠上下文1.堆叠顺序div是有空间层次关系的。 原则：相同类型的元素，后出现的会覆盖之前的。 层次顺序（底层-上层）：   background border 块级 浮动 内联 z-index : 0 ( position :relative , absolute) z-index :  +  注意：z-index 只有在 position 不是 static 的时候才有用，比如 relativ">
<meta name="keywords" content="CSS">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS-堆叠上下文">
<meta property="og:url" content="https://storm4542.github.io/archives/81ea01b1.html">
<meta property="og:site_name" content="Storm">
<meta property="og:description" content="堆叠上下文1.堆叠顺序div是有空间层次关系的。 原则：相同类型的元素，后出现的会覆盖之前的。 层次顺序（底层-上层）：   background border 块级 浮动 内联 z-index : 0 ( position :relative , absolute) z-index :  +  注意：z-index 只有在 position 不是 static 的时候才有用，比如 relativ">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2018-08-25T09:08:27.166Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="CSS-堆叠上下文">
<meta name="twitter:description" content="堆叠上下文1.堆叠顺序div是有空间层次关系的。 原则：相同类型的元素，后出现的会覆盖之前的。 层次顺序（底层-上层）：   background border 块级 浮动 内联 z-index : 0 ( position :relative , absolute) z-index :  +  注意：z-index 只有在 position 不是 static 的时候才有用，比如 relativ">
  
    <link rel="alternative" href="https://storm4542.github.io/atom.xml" title="Storm" type="application/atom+xml">
  
  
    <link rel="icon" href="https://storm4542.github.io/favicon.png">
  
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/style.css">
  

</head></html>
<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <section id="main"><article id="post-css-堆叠上下文" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      CSS-堆叠上下文
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="" class="article-date">
  <time datetime="2018-08-24T08:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="堆叠上下文"><a href="#堆叠上下文" class="headerlink" title="堆叠上下文"></a>堆叠上下文</h3><h4 id="1-堆叠顺序"><a href="#1-堆叠顺序" class="headerlink" title="1.堆叠顺序"></a>1.堆叠顺序</h4><p>div是有空间层次关系的。</p>
<p>原则：相同类型的元素，后出现的会覆盖之前的。</p>
<p>层次顺序（底层-上层）： </p>
<ol>
<li>background</li>
<li>border</li>
<li>块级</li>
<li>浮动</li>
<li>内联</li>
<li>z-index : 0 ( position :relative , absolute)</li>
<li>z-index :  +</li>
</ol>
<p>注意：z-index 只有在 position 不是 static 的时候才有用，比如 relative , absolute</p>
<h4 id="2-怎么样形成堆叠上下文"><a href="#2-怎么样形成堆叠上下文" class="headerlink" title="2.怎么样形成堆叠上下文"></a>2.怎么样形成堆叠上下文</h4><p>可以理解为堆叠作用域。跟 BFC 一样，我们只知道一些属性会触发堆叠上下文，但并不知道堆叠上下文是什么。</p>
<ul>
<li><strong>根元素 (HTML),</strong></li>
<li><strong>z-index 值不为 “auto”的 绝对/相对定位，</strong></li>
<li><strong>一个 z-index 值不为 “auto”的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，</strong></li>
<li><strong>opacity 属性值小于 1 的元素（参考 the specification for opacity），</strong></li>
<li><strong>transform 属性值不为 “none”的元素，</strong></li>
<li>mix-blend-mode 属性值不为 “normal”的元素，</li>
<li>filter值不为“none”的元素，</li>
<li>perspective值不为“none”的元素，</li>
<li>isolation 属性被设置为 “isolate”的元素，</li>
<li><strong>position: fixed</strong></li>
<li>在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章）</li>
<li>-webkit-overflow-scrolling 属性被设置 “touch”的元素</li>
</ul>

      

      
        
    </div>
  </div>
  
    
<nav id="article-nav">
  
    <a href="422899b1.html" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          CSS-宽度高度，对齐
        
      </div>
    </a>
  
  
    <a href="cef93ee3.html" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">单元测试</div>
    </a>
  
</nav>

  
</article>


<section id="comments">
  <link rel="stylesheet" href="static/css/default.css">
  <script src="static/js/gitment.browser.js"></script>
  <script>
    var gitment = new Gitment({
      owner: 'your github account',
      repo: 'your repo',
      oauth: {
        client_id: 'your client_id',
        client_secret: 'your client_secret',
      },
    })
    gitment.render('comments')
  </script>
</section>

</section>
        <aside id="sidebar">
  <nav class="menus">
  	<ul>
  		<li><a href="index.html"><i class="icon icon-home"></i></a></li>
  		
			<li><a href="index1.html"><i class="icon icon-fenlei"></i></a></li>
  		
  		
			<li><a href="index2.html"><i class="icon icon-tag"></i></a></li>
  		
  		
  			<li><a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer"><i class="icon icon-github"></i></a></li>
  		
  	</ul>
  </nav>
  <a id="go-top" href="#"><i class="icon icon-up"></i></a>
</aside>

      </div>
      <footer id="footer">
  
	<div id="footer-info" class="inner">
	  &copy; 2019 Storm 
	  - Powered by <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Hexo</a>
	  - Theme <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Jane</a>
	</div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="index.html" class="mobile-nav-link">Home</a>
  
    <a href="index1.html" class="mobile-nav-link">Archives</a>
  
    <a href="index2.html" class="mobile-nav-link">Tag</a>
  
    <a href="javascript:;" class="mobile-nav-link" rel="external nofollow noopener noreferrer" target="_blank">Github</a>
  
</nav>
    
<script>
  var disqus_shortname = 'storm';
  
  var disqus_url = 'https://storm4542.github.io/archives/81ea01b1.html';
  
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<script src="static/js/jquery.min.js"></script>


  <link rel="stylesheet" href="static/css/jquery.fancybox.css">
  <script src="static/js/jquery.fancybox.pack.js"></script>


<script src="static/js/script.js"></script>

  </div>
</body>
